<template>
  <h1 class="text-base font-semibold leading-7 text-gray-900">
    {{ $t('pageNetwork.pageDescription') }}
  </h1>
  <h1 class="text-base font-semibold leading-7 text-gray-900 my-4">
    {{ $t('pageNetwork.networkSettings') }}
  </h1>
  <network-global-settings @open-host-modal="openHostModal" />

  <el-tabs v-model="tabIndex" class="mt-12" type="card">
    <el-tab-pane
      :label="item.Id"
      v-for="(item, index) in ethernetData"
      :key="item.Id"
      :name="index"
    >
      <el-card shadow="always">
        <network-interface-settings
          @open-address="openAddress"
          :tab-index="tabIndex"
        />
        <table-ipv-4 @open-ipv4="openIpv4" :tab-index="tabIndex" />
        <table-dns @open-dns="openDns" :tab-index="tabIndex" />
      </el-card>
    </el-tab-pane>
  </el-tabs>

  <modal-hostname
    ref="modalHostNameRef"
    :hostname="currentHostname"
    @ok="saveSettings"
  />
  <modal-mac-address ref="modalMacAddressRef" @ok="saveSettings" />
  <modal-ipv4
    ref="modalIpv4Ref"
    :default-gateway="defaultGateway"
    @ok="saveIpv4Address"
  />
  <modal-dns ref="modalDnsRef" @ok="saveDnsAddress" />
</template>

<script setup lang="ts">
import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
import TableIpv4 from './TableIpv4.vue';
import TableDns from './TableDns.vue';
import ModalHostname from './ModalHostname.vue';
import ModalIpv4 from './ModalIpv4.vue';
import ModalDns from './ModalDns.vue';
import ModalMacAddress from './ModalMacAddress.vue';
import { useNetworkStore } from '@/store/Settings/NetworkStore';

const networkStore = useNetworkStore();
await networkStore.getEthernetData();

const ethernetData = computed(() => networkStore.ethernetData);

const tabIndex = ref(0);

const modalHostNameRef = ref();
const openHostModal = () => {
  modalHostNameRef.value.dialogVisible = true;
};
const saveSettings = (modalFormData: {
  HostName?: string;
  MACAddress?: string;
}) => {
  networkStore
    .saveSettings(modalFormData)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    );
};

const defaultGateway = ref();
const currentHostname = ref();
const currentMacAddress = ref();

const getModalInfo = () => {
  defaultGateway.value =
    networkStore.globalNetworkSettings[tabIndex.value].defaultGateway;

  currentHostname.value =
    networkStore.globalNetworkSettings[tabIndex.value].hostname;
  currentMacAddress.value =
    networkStore.globalNetworkSettings[tabIndex.value].macAddress;
};

const modalMacAddressRef = ref();

const openAddress = () => {
  modalMacAddressRef.value.dialogVisible = true;
};

const modalIpv4Ref = ref();
const saveIpv4Address = (modalFormData: {
  Address: string;
  Gateway: string;
  SubnetMask: string;
}) => {
  networkStore
    .saveIpv4Address(modalFormData)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    );
};

const openIpv4 = () => {
  modalIpv4Ref.value.dialogVisible = true;
};

const modalDnsRef = ref();
const openDns = () => {
  modalDnsRef.value.dialogVisible = true;
};
const saveDnsAddress = (modalFormData: string[]) => {
  networkStore
    .saveDnsAddress(modalFormData)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    );
};

watch(ethernetData, () => {
  getModalInfo();
});
</script>
